//  代运营店铺管理---添加店铺

import React,{Component} from 'react'
import {Modal,Table ,Form,Radio,Input,Button,message} from 'antd'
import NumberInput from '../../../components/NumberInput/NumberInput'
import './AddReplaceShop.css'
import $ from 'jquery';
import * as tools from '../../../tools/tools.js';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class AddReplaceShop extends Component{
  constructor(props){
    super(props)
    this.columns=[
      {
        title: '方案名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '方案描述',
        dataIndex: 'describe',
        key: 'describe',
      }
    ]
    this.profit={};
    this.state={
      programmevalue:'',
      addReplacenumber:'',
      addReplacename:'',
      addReplaceadress:'',
      inputValue:null,
      profit:{}
    }
  }

  handleSubmit=(e)=>{   //modal确认的回调
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      values.discount=(this.props.form.getFieldValue('into')/this.props.form.getFieldValue('output')).toFixed(2)*100;
      if(this.state.selectedData && this.props.type ==1){
        values.temp_id = this.state.selectedData.id;
      }
      values.into *= 100;
      values.output *= 100;
      if(this.props.type ==2){
        values.id =this.props.Selectedata[0].id
        values.temp_id = this.props.Editshopdetials.programme.id
      }
      values.token = localStorage.token;
      if (!err) {
        tools.loginView(this).then(
          $.ajax({
              type:'Post',
              url: tools.apiUrl+'operation/shop_add',
              data:values,
              success:(res)=>{
                if(res.status ==1){
                  this.props.form.resetFields();
                  this.props.Modifylistcontent();
                  this.props.onCancel();
                }else{
                  message.error(res.msg)
                }
              },
          })
        )
      }else{
        message.error("请输入完整信息！")
      }
    });
  }

  inputOnFocus=()=>{       //input聚焦后打开modal页面选择方案
    tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+'payment/allot_programme_list',
      data:{
        token:localStorage.token,
        pagerow:3
      },
      success:(res)=>{
        if(res.status ==1){
            this.setState({
              programmevisible:true,
              programmeData:res.result
            })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

  programmesearch=()=>{     //方案modal里面的搜索回调
    tools.loginView(this).then(
      $.ajax({
        type:'post',
        url:tools.apiUrl+'payment/allot_programme_list',
        data:{
          token:localStorage.token,
          pagerow:3,
          name:this.state.programmevalue
        },
        success:(res)=>{
          if(res.status ==1){
            this.setState({
              programmeData:res.result
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    )
  }
  programmeCancel=()=>{         //方案取消回调
    this.setState({
      programmevisible:false
    })
  }
  programmeSubmit=()=>{       //方案点击成功回调
    if(this.state.selectedData){
      this.setState({
        inputValue:this.state.selectedData.name,
        programmevisible:false
      })
      this.state.selectedData.service.map((item)=>{
        if(item.type ==4){
          this.setState({
            profit:{
              service:item.service,     //总费率
              company:item.company,     //公司费率
              business:item.business,   //企代费率
              person:item.person,       //个代费率
              bind:item.bind,           //绑客商家费率
              recommend:item.recommend, //推广商家费率
              bank:item.bank            //银行费率
            }
          })
        }
      })
    }
  }
  valuechange=(e)=>{
    this.setState({
      programmevalue:e.target.value
    })
  }

  rowSelection = {      //单选产生的函数
    onChange: (selectedRowKeys, selectedRows) => {
      this.setState({
        selectedData:selectedRows[0]
      })
    },
    type:'radio'
  };

  AddReplacecancel=()=>{
    this.props.onCancel();
    this.props.form.resetFields();
  }

  pagechange=(pagination, filters, sorter)=>{      //方案改变页码时的回调
    tools.loginView(this).then(
      $.ajax({
        type:'post',
        url: tools.apiUrl+'payment/allot_programme_list?page='+pagination.current,
        data:{
            token:localStorage.token,
            pagerow:3
        },
        success:(res)=>{
            if(res.status ==1){
              this.setState({
                programmeData:res.result
              })
            }else{
                message.error(res.msg)
            }
        }
      })
    )
  }

  shopIdentifier=(e)=>{       //输入编号onblur
    let value = e.target.value
    tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+"shop/identifier_info",
      data:{
        token:localStorage.token,
        identifier: value
      },
      success:(res)=>{
        if(res.status ==1){
          let data = res.result
          this.setState({
              addShopId:data.identifier,
              addShopName:data.name,
              addShopaddress:data.address,
              addShopmobile:data.name
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

  shopintomoey=(e)=>{         //投入onblur
    this.setState({
      addShopinto:e.target.value
    })
  }
  shopoutputmoney=(e)=>{       //产出onblur
    this.setState({
      addShopoutput:e.target.value
    })
  }
  componentWillReceiveProps(nextprops){
    this.setState({
      inputValue:nextprops.Editshopdetials?nextprops.Editshopdetials.programme.name:''
    })
  }

  render(){

    const { getFieldDecorator } = this.props.form;
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };
    return(
      <Modal title="添加账号" className="modal_box"
      visible={this.props.show}
      maskClosable={false}
      onOk={this.handleSubmit}
      onCancel={this.AddReplacecancel}
      bodyStyle={{height:'700px',overflow: 'auto'}}
      >
        <div className="addReplace_box" >
          <Form layout="vertical" onSubmit={this.handleSubmit}>
            <div style={{marginRight:'10px',marginTop:'10px'}}>    {/*选择商家*/}
              <div className="addReplace_Choice">
                  <span>选择商家</span>
              </div>
              <div className="addReplace_content" >
                <div className="addReplace_left">
                  <FormItem
                    label="店铺编号"
                    hasFeedback
                  >
                    {getFieldDecorator('shop_identifier',{
                      rules:[{required:true,message:' '}],
                      initialValue:this.props.type ==2 ?(this.props.Editshopdetials?this.props.Editshopdetials.shop_identifier:''):'',
                    })(
                      <NumberInput placeholder="请输入店铺编号" onBlur={this.shopIdentifier} style={{width:200}}/>
                    )}
                  </FormItem>
                  <FormItem
                    label="运营方"
                  >
                    {getFieldDecorator('operate_type',{
                      rules:[{required:true,message:'a'}],
                      initialValue:this.props.type ==2 ?(this.props.Editshopdetials?this.props.Editshopdetials.operate_type:''):1
                    })(
                      <RadioGroup >
                        <Radio style={radioStyle} value={1}>公司自营</Radio>
                        <Radio style={radioStyle} value={2}>第三方</Radio>
                      </RadioGroup>
                    )}
                  </FormItem>
                  {this.props.form.getFieldValue("operate_type") ==2?<FormItem
                    hasFeedback
                  >
                    {getFieldDecorator('operate_account',{
                      rules:[{required:true,message:' '}],
                      initialValue:this.props.type ==2 ?(this.props.Editshopdetials?this.props.Editshopdetials.operate_account.username:''):''
                    })(
                      <Input placeholder="请输入第三方账户" style={{width:200}}/>
                    )}
                  </FormItem>:false}
                </div>
                <div className="addReplace_right">
                      <div>
                        <div>商家编号:</div>
                        <div>{this.state.addShopId}</div>
                      </div>
                      <div>
                        <div>商家名称:</div>
                        <div>{this.state.addShopName}</div>
                      </div>
                      <div>
                        <div>商家地址:</div>
                        <div>{this.state.addShopaddress}</div>
                      </div>
                </div>
              </div>
            </div>

            <div style={{marginRight:'10px',marginTop:'10px'}}>   {/*配置会员储值金额*/}
              <div className="addReplace_Choice">
                  <span>配置会员储值金额</span>
              </div>
              <div className="addReplace_content" >
                <div className="addReplace_left">
                  <FormItem
                    label="投入"
                    hasFeedback
                  >
                    {getFieldDecorator('into',{
                      rules:[{required:true,message:' '}],
                      initialValue:this.props.type ==2 ?(this.props.Editshopdetials?this.props.Editshopdetials.into:''):''
                    })(
                      <NumberInput placeholder="请输入投入金额" onBlur={this.shopintomoey} style={{width:200}}/>
                    )}元
                  </FormItem>
                  <FormItem
                    label="产出"
                    hasFeedback
                  >
                    {getFieldDecorator('output',{
                      rules:[{required:true,message:' '}],
                      initialValue:this.props.type ==2 ?(this.props.Editshopdetials?this.props.Editshopdetials.output:''):''
                    })(
                      <NumberInput placeholder="请输入产出金额" onBlur={this.shopoutputmoney} style={{width:200}}/>
                    )}元
                  </FormItem>
                  <Radio defaultChecked >达到该收益金额，方案自动停止</Radio>
                </div>
                <div className="addReplace_right">
                      <div>
                        在没有优惠的情况下:
                      </div>
                      <div>
                        <div>想该商家投入<strong style={{color:'red'}}>{this.state.addShopinto}</strong>元</div>
                        <div>将获得产出<strong style={{color:'red'}}>{this.state.addShopoutput}</strong>元</div>
                      </div>
                      <div>
                        <div>优惠力度约为<strong style={{color:'red'}}>{this.state.addShopinto && this.state.addShopoutput ?(this.state.addShopinto/this.state.addShopoutput*10).toFixed(2):0}</strong>折</div>
                        <div>收益<strong style={{color:'red'}}>{this.state.addShopinto && this.state.addShopoutput ?this.state.addShopoutput-this.state.addShopinto:0}</strong>元</div>
                      </div>
                      <div>1.产出不包含商家不优惠部分，比如酒水、锅底不打折</div>
                      <div>2.以上当经营期间优惠金额为0时</div>
                </div>
              </div>
            </div>

            <div style={{marginRight:'10px',marginTop:'10px'}}>   {/*选择分润方案*/}
              <div className="addReplace_Choice">
                  <span>选择分润方案</span>
              </div>
              <div className="addReplace_content" >
                <div className="addReplace_left">
                  <FormItem
                    label="选择分润规则"
                    hasFeedback
                  >
                    {getFieldDecorator('temp_id',{
                      rules:[{required:true,message:' '}],
                      initialValue:this.state.inputValue             //这里有问题 //id
                    })(
                      <Input  onClick={this.inputOnFocus} readOnly placeholder="选择" style={{width:200}}  />
                    )}
                  </FormItem>
                  <FormItem
                    label="商家手续费"
                  >
                    {getFieldDecorator('type',{
                      rules:[{required:true,message:' '}],
                      initialValue:this.props.type ==2 ?(this.props.Editshopdetials?this.props.Editshopdetials.type:''):1
                    })(
                      <RadioGroup >
                        <Radio style={radioStyle} value={1}>公司补贴</Radio>
                        <Radio style={radioStyle} value={2}>商家承担</Radio>
                      </RadioGroup>
                    )}
                  </FormItem>
                </div>
                <div className="addReplace_right">
                      <div>按照此分润规则，还需要支付：</div>
                      <div>以全用商圈联盟券核销为例</div>
                      <div>
                        <div>锁客：<strong style={{color:'red'}}>{this.state.profit.bind &&this.state.addShopoutput?(this.state.addShopoutput*this.state.profit.bind).toFixed(2):0}</strong>元</div>
                        <div>推广<strong style={{color:'red'}}>{(this.state.addShopoutput && this.state.profit.recommend)?(this.state.addShopoutput*this.state.profit.recommend).toFixed(2):0}</strong>元</div>
                      </div>
                      <div>
                        <div>区域经理<strong style={{color:'red'}}>{this.state.addShopoutput && this.state.profit.person?(this.state.addShopoutput*this.state.profit.person).toFixed(2):0}</strong>折</div>
                        <div>城市服务商<strong style={{color:'red'}}>{this.state.addShopoutput && this.state.profit.business?(this.state.addShopoutput*this.state.profit.business).toFixed(2):0}</strong>元</div>
                      </div>
                      <div>
                        <div>银行<strong style={{color:'red'}}>{this.state.addShopoutput && this.state.profit.bank?(this.state.addShopoutput*this.state.profit.bank).toFixed(2):0}</strong>元</div>
                        <div>平台<strong style={{color:'red'}}>{this.state.addShopoutput && this.state.profit.company?(this.state.addShopoutput*this.state.profit.company).toFixed(2):0}</strong>元</div>
                      </div>
                      <div>
                        <div>合计<strong style={{color:'red'}}>{this.state.addShopoutput && this.state.profit.service?(this.state.addShopoutput*this.state.profit.service).toFixed(2):0}</strong>元</div>
                        <div>最后，收益为：<strong style={{color:'red'}}>{this.state.addShopinto && this.state.addShopoutput && this.state.profit.service?(this.state.addShopoutput-this.state.addShopinto-this.state.addShopoutput*this.state.profit.service).toFixed(2):0}</strong>元</div>
                      </div>
                </div>
              </div>
            </div>
          </Form>
        </div>
        <Modal
          visible={this.state.programmevisible}
          maskClosable={false}
          onOk={this.programmeSubmit}
          onCancel={this.programmeCancel}
          >
            <div className="city_search">
              <span>共有{this.state.programmeData?this.state.programmeData.total:false}种方案，你可以选择其中1种</span>
              <div className="programme_search">
                <Input  type="text" placeholder="请输入搜索方案名称" style={{width:200}} value={this.state.programmevalue} onChange={this.valuechange}/>
                <Button type="primary" onClick={this.programmesearch}>搜索</Button>
              </div>
            </div>
            <Table  
            columns={this.columns} 
            rowSelection={this.rowSelection}
            dataSource={this.state.programmeData?this.state.programmeData.data:false}
            onChange={this.pagechange}
            pagination={{showQuickJumper:true,total:this.state.programmeData?this.state.programmeData.last_page*10:false}}
            >

            </Table>
        </Modal>
      </Modal>
    )
  }
}
const newAddReplaceShop = Form.create()(AddReplaceShop);
export default newAddReplaceShop